<template>
	<view>
		<image class="back_image" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-83418c8b-2862-4eac-a6ec-bf64544c5621/cf0b47e3-6906-4da5-acc8-534a8fb4f0ca.jpg" mode="aspectFill"></image>
		<view class="content_view">
			<!-- 导航条 -->
			<view class="stauts_bar_view" :style="{ height: statusbarHeight+'px'}"></view>
			<view class="nav_content">
				<uni-icons class="close_button" type="closeempty" size="30" color="#FFFFFF" @click="closeButtonClick()"></uni-icons>
			</view>
			<!-- 页面其他内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusbarHeight: 20,
			};
		},
		onLoad() {
			const info = uni.getSystemInfoSync();
			this.statusbarHeight = info.statusBarHeight;
		},
		methods: {
			closeButtonClick() {
				uni.navigateBack();
			},
		}
		
	}
</script>

<style lang="scss">
	//===== 背景页面 =======//
	.back_image {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		
		// css animation
		animation-name: scaleanimation; // 动画名称
		animation-duration: 8s; // 动画持续时间
		animation-direction: alternate; // 轮流反向播放动画
		animation-iteration-count: infinite; // 动画播放的次数
		animation-timing-function: linear; // 动画的速度曲线
	}
	
	@keyframes scaleanimation {
		from {scale: 1;}
		to {scale: 1.2;}
	}

	//===== 内容页面 =======//
	.content_view {
		
	}
	
	.nav_content {
		height: 44px;
		display: flex;
		align-items: center;
	}
	.close_button {
		margin-left: 20rpx;
	}
	

</style>
